import React from 'react'
import {Tree} from 'antd';

const {TreeNode} = Tree;

const treeData = [
  {
    title: '广东省',
    key: '广东省',
    children: [
      {
        title: '广州市',
        key: '广州市',
        children: [
          {title: '海珠区', key: '海珠区'},
          {title: '天河区', key: '天河区'},
          {title: '白云区', key: '白云区'},
        ],
      },
      {
        title: '梅州市',
        key: '梅州市',
        children: [
          {title: '梅江', key: '梅江'},
          {title: '五华', key: '五华'},
          {title: '梅县', key: '梅县'},
        ],
      },
      {
        title: '深圳市',
        key: '深圳市',
      },
    ],
  },
  {
    title: '上海市',
    key: '上海市',
    children: [
      {title: '宝山区', key: '宝山区'},
      {title: '长宁', key: '长宁'},
      {title: '黄埔', key: '黄埔'},
    ],
  },
  {
    title: '浙江省',
    key: '浙江省',
  },
];

export default class Demo extends React.Component {
  state = {
    expandedKeys: ['五华', '上海市'],
    autoExpandParent: false,
    checkedKeys: ['上海市'],
    selectedKeys: ["广东省"],
  };


  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item} />;
    });

  render() {
    return (
      <Tree
        checkable
        onExpand={expandedKeys => {
          console.log('onExpand', expandedKeys);
          this.setState({
            expandedKeys,
            autoExpandParent: false,   //todo kim-doc如果不将autoexpandparent设置为false，则如果子级展开，则父级不能折叠。//或者，可以删除所有展开的子键。
          });
        }}
        expandedKeys={this.state.expandedKeys}
        autoExpandParent={this.state.autoExpandParent}
        onCheck={checkedKeys => {
          console.log('onCheck', checkedKeys);
          this.setState({checkedKeys})
        }}
        checkedKeys={this.state.checkedKeys}
        onSelect={(selectedKeys, info) => {
          this.setState({selectedKeys});
          console.log('onSelect', info);
        }}
        selectedKeys={this.state.selectedKeys}
      >
        {this.renderTreeNodes(treeData)}
      </Tree>
    );
  }
}
